<template>
  <!--  效益评价分析-->
  <div class="permission">
    <div class="desc">
      <div>
        <ep-button :class="type === '0'? '':'ep-button-class'" :size="size" style="margin-left: 15px" icon="export.svg" @click="getInfo('0',{h1406: formInfo.h1406})">推广情况</ep-button>
        <ep-button :class="type === '1'? '':'ep-button-class'" :size="size" style="margin-left: 15px" icon="export.svg" @click="getInfo('1',{h1406: formInfo.h1406})">文化景区收益及业态发展</ep-button>
        <ep-button :class="type === '2'? '':'ep-button-class'" :size="size" style="margin-left: 15px" icon="export.svg" @click="getInfo('2')">热门古迹</ep-button>
        <ep-button :class="type === '3'? '':'ep-button-class'" :size="size" style="margin-left: 15px" icon="export.svg" @click="getInfo('3')">关注热点</ep-button>
        <ep-button :class="type === '4'? '':'ep-button-class'" :size="size" style="margin-left: 15px" icon="export.svg" @click="getInfo('4')">舆情动态</ep-button>
      </div>
    </div>

    <div class="operate">
      <div>
        <zh-form ref="formInfo" :model="formInfo"  labelAlign="right" v-if="type === '0' || type === '1'">
          <zh-row :span="24">
            <zh-input type="month" :disabled="false" label="年月:" v-model="formInfo.h1406"  format="YYYY-MM" @change="changeMonth"/>
          </zh-row>
        </zh-form>
      </div>
      <div>
        <ep-button status="primary" @click=save()>新增</ep-button>
      </div>
    </div>

    <a-modal
        :title="title"
        centered
        style=""
        width="50%"
        destroyOnClose
        :mask-closable="false"
        v-model="visible"
        @cancel="handleCancel"
    >
      <benefitEvaluationForm ref="benefitEvaluationForm" :type="type"/>
      <template slot="footer">
        <a-button @click="handleCancel">关闭</a-button>
        <a-button @click="handleOK">保存</a-button>
      </template>
    </a-modal>
    <div class="ep-table" v-if="type === '0'">
      <zh-table height="auto" ref="table0" type="default"
                :url="tableUrl" :columns="tableColumn">
        <template #operate="{ row }">
          <div class="alert-message">
            <i class="fa fa-exclamation-circle alert-message-icon"></i>
            <span class="alert-message-content">
              <ep-button type="primary" @click=edit(row)>编辑</ep-button>
            </span>
            <span class="alert-message-content" style="margin-left: 20px;">
                <ep-button type="danger" @click="del(row)">删除</ep-button>
            </span>
          </div>
        </template>
      </zh-table>
    </div>
    <div class="ep-table" v-else-if="type === '1'">
      <zh-table height="auto" ref="table1" type="default"
                :url="tableUrl" :columns="tableColumn1">
        <template #operate="{ row }">
          <div class="alert-message">
            <i class="fa fa-exclamation-circle alert-message-icon"></i>
            <span class="alert-message-content">
              <ep-button type="primary" @click=edit(row)>编辑</ep-button>
            </span>
            <span class="alert-message-content" style="margin-left: 20px;">
              <ep-button type="danger" @click="del(row)">删除</ep-button>
            </span>
          </div>
        </template>
      </zh-table>
    </div>
    <div class="ep-table" v-else-if="type === '2'">
      <zh-table height="auto" ref="table2" type="default"
                :url="tableUrl2" :columns="tableColumn2">
        <template #operate="{ row }">
          <div class="alert-message">
            <i class="fa fa-exclamation-circle alert-message-icon"></i>
            <span class="alert-message-content">
              <ep-button type="primary" @click=edit(row)>编辑</ep-button>
            </span>
            <span class="alert-message-content" style="margin-left: 20px;">
              <ep-button type="danger" @click="del(row)">删除</ep-button>
            </span>
          </div>
        </template>
      </zh-table>
    </div>
    <div class="ep-table" v-else-if="type === '3'">
      <zh-table height="auto" ref="table3" type="default"
                :url="tableUrl3" :columns="tableColumn3">
        <template #operate="{ row }">
          <div class="alert-message">
            <i class="fa fa-exclamation-circle alert-message-icon"></i>
            <span class="alert-message-content">
              <ep-button type="primary" @click=edit(row)>编辑</ep-button>
            </span>
            <span class="alert-message-content" style="margin-left: 20px;">
              <ep-button type="danger" @click="del(row)">删除</ep-button>
            </span>
          </div>
        </template>
      </zh-table>
    </div>
    <div class="ep-table" v-else-if="type === '4'">
      <zh-table height="auto" ref="table4" type="default"
                :url="tableUrl4" :columns="tableColumn4">
        <template #operate="{ row }">
          <div class="alert-message">
            <i class="fa fa-exclamation-circle alert-message-icon"></i>
            <span class="alert-message-content">
              <ep-button type="primary" @click=edit(row)>编辑</ep-button>
            </span>
            <span class="alert-message-content" style="margin-left: 20px;">
              <ep-button type="danger" @click="del(row)">删除</ep-button>
            </span>
          </div>
        </template>
      </zh-table>
    </div>

    <a-modal
        :title="title"
        centered
        style=""
        width="50%"
        destroyOnClose
        :mask-closable="false"
        v-model="visible2"
        @cancel="handleCancel"
    >
      <zh-form ref="formInfo2"  :model="formData2"  labelAlign="right" >
        <zh-card style="width:100%;float:left">
          <zh-row :span="18">
            <zh-input
                prop="h14102"
                type="text"
                label="排行"
                v-model="formData2.h14102"
            ></zh-input>
            <zh-input
                prop="h14103"
                type="text"
                label="名称"
                v-model="formData2.h14103"
            ></zh-input>
            <zh-input
                prop="h14104"
                type="text"
                label="人流量"
                v-model="formData2.h14104"
            ></zh-input>
          </zh-row>
          <div style="height: 50px">

          </div>
        </zh-card>
      </zh-form>
      <template slot="footer">
        <a-button @click="handleCancel">关闭</a-button>
        <a-button @click="handleOK">保存</a-button>
      </template>
    </a-modal>

    <a-modal
        :title="title"
        centered
        style=""
        width="50%"
        destroyOnClose
        :mask-closable="false"
        v-model="visible3"
        @cancel="handleCancel"
    >
      <zh-form ref="formInfo3"  :model="formData3"  labelAlign="right" >
        <zh-card style="width:100%;float:left">
          <zh-row :span="18">
            <zh-input
                prop="h14202"
                type="text"
                label="关注热点词"
                v-model="formData3.h14202"
            ></zh-input>
          </zh-row>
          <div style="height: 50px">
          </div>
        </zh-card>
      </zh-form>
      <template slot="footer">
        <a-button @click="handleCancel">关闭</a-button>
        <a-button @click="handleOK">保存</a-button>
      </template>
    </a-modal>

    <a-modal
        :title="title"
        centered
        style=""
        width="50%"
        destroyOnClose
        :mask-closable="false"
        v-model="visible4"
        @cancel="handleCancel"
    >
      <zh-form ref="formInfo4"  :model="formData4"  labelAlign="right" >
        <zh-card style="width:100%;float:left">
          <zh-row :span="18">
            <zh-input
                prop="h14302"
                type="text"
                label="热词"
                v-model="formData4.h14302"
            ></zh-input>
            <zh-input
                prop="h14303"
                type="text"
                label="T0(当日)热度"
                v-model="formData4.h14303"
            ></zh-input>
            <zh-input
                prop="h14304"
                type="text"
                label="T-1热度"
                v-model="formData4.h14304"
            ></zh-input>
            <zh-input
                prop="h14305"
                type="text"
                label="T-2热度"
                v-model="formData4.h14305"
            ></zh-input>
            <zh-input
                prop="h14306"
                type="text"
                label="T-3热度"
                v-model="formData4.h14306"
            ></zh-input>
            <zh-input
                prop="h14307"
                type="text"
                label="T-4热度"
                v-model="formData4.h14307"
            ></zh-input>
            <zh-input
                prop="h14308"
                type="text"
                label="T-5热度"
                v-model="formData4.h14308"
            ></zh-input>
            <zh-input
                prop="h14309"
                type="text"
                label="T-6热度"
                v-model="formData4.h14309"
            ></zh-input>
          </zh-row>
          <div style="height: 50px">
          </div>
        </zh-card>
      </zh-form>
      <template slot="footer">
        <a-button @click="handleCancel">关闭</a-button>
        <a-button @click="handleOK">保存</a-button>
      </template>
    </a-modal>
  </div>
</template>
<script>
import {benefitEvaluationForGetInfo,benefitEvaluationForSave,benefitEvaluationForUpdate,benefitEvaluationForDel,
  getInfoForH141,getInfoForH142,getInfoForH143,
  saveForH141,updateForH141,delForH141,
  saveForH142,updateForH142,delForH142,
  saveForH143,updateForH143,delForH143} from "@/services/system/whdngxlApi"
import moment from 'moment'
import ZhTable from "@/components/zh-table/ZhTable";
import EpSearch from "@/components/assembly/search";
import {mapGetters} from "vuex";
import {getBatchDict} from "@/services/system/api";

export default {
  name: 'benefitEvaluationAnalysis',
  computed: {
    ...mapGetters(['size']),
    title () {
      let title = ""
      if(this.type === '0'){
        title = '推广情况'
      }else if(this.type === '1'){
        title = '文化景区收益及业态发展'
      }else if(this.type === '2'){
        title = '热门古迹'
      }else if(this.type === '3'){
        title = '关注热点'
      }else if(this.type === '4'){
        title = '舆情动态'
      }
      return title + (this.flag === 'save'? '>新增' : '>编辑')
    }
  },
  components: {
    EpSearch,
    benefitEvaluationForm: () => import ("@/pages/whdn/benefitEvaluation/form/benefitEvaluationForm"),
    ZhTable
  },
  data() {
    return {
      dictData: {},
      tableColumn: [
        {field: 'orgName', title: '县区市', align: 'center', width: 300},
        {field: 'h1402', title: '推广次数', align: 'center', width: 120},
        {
          field: 'operate', title: '操作', fixed: 'right', align: 'center', width: 200, slots: {
            // 使用插槽模板渲染
            default: 'operate'
          }
        },
      ],
      tableColumn1: [
        {field: 'h1403', title: '景区名称', align: 'center', width: 300},
        {field: 'h1404', title: '收益(万元)', align: 'center', width: 120},
        {field: 'h1405Name', title: '业态发展评价', align: 'center', width: 250},
        {
          field: 'operate', title: '操作', fixed: 'right', align: 'center', width: 200, slots: {
            // 使用插槽模板渲染
            default: 'operate'
          }
        },
      ],
      tableUrl: benefitEvaluationForGetInfo,
      tableUrl2: getInfoForH141,
      tableColumn2: [
        {field: 'h14102', title: '排行', align: 'center', width: 300},
        {field: 'h14103', title: '名称', align: 'center', width: 120},
        {field: 'h14104', title: '人流量', align: 'center', width: 250},
        {
          field: 'operate', title: '操作', fixed: 'right', align: 'center', width: 200, slots: {
            // 使用插槽模板渲染
            default: 'operate'
          }
        },
      ],
      tableUrl3: getInfoForH142,
      tableColumn3: [
        {field: 'h14202', title: '关注热点词', align: 'center', width: 250},
        {
          field: 'operate', title: '操作', fixed: 'right', align: 'center', width: 200, slots: {
            // 使用插槽模板渲染
            default: 'operate'
          }
        },
      ],
      tableUrl4: getInfoForH143,
      tableColumn4: [
        {field: 'h14302', title: '热词', align: 'center', width: 300},
        {field: 'h14303', title: 'T0(当日)热度', align: 'center', width: 120},
        {field: 'h14304', title: 'T-1热度', align: 'center', width: 120},
        {field: 'h14305', title: 'T-2热度', align: 'center', width: 120},
        {field: 'h14306', title: 'T-3热度', align: 'center', width: 120},
        {field: 'h14307', title: 'T-4热度', align: 'center', width: 120},
        {field: 'h14308', title: 'T-5热度', align: 'center', width: 120},
        {field: 'h14309', title: 'T-6热度', align: 'center', width: 120},
        {
          field: 'operate', title: '操作', fixed: 'right', align: 'center', width: 200, slots: {
            // 使用插槽模板渲染
            default: 'operate'
          }
        },
      ],
      toolbarConfig: {
        custom: true,
        slots: {}
      },
      visible: false,
      option: {data: ''},
      manageRate: '',
      formInfo: {
        h1406: undefined
      },
      type: '0',
      flag: undefined,
      visible2: false,
      visible3: false,
      visible4: false,
      formData2: {
        h14102: undefined,
        h14103: undefined,
        h14104: undefined,
      },
      formData3: {
        h14202: undefined
      },
      formData4: {
        h14302: undefined,
        h14303: undefined,
        h14304: undefined,
        h14305: undefined,
        h14306: undefined,
        h14307: undefined,
        h14308: undefined,
        h14309: undefined,
      }
    }
  },
  created() {
    this.$nextTick(() => {
      this.init()
    })
  },
  mounted() {
  },
  methods: {
    moment,
    init() {
      this.formInfo.h1406=moment().format('YYYY-MM')
      this.getInfo("0",{h1406: this.formInfo.h1406})
    },
    getInfo(type,params = {}) {
      this.type = type
      if (type === '0') {
        this.$nextTick(() => {
          this.$refs.table0.query(Object.assign({type: type}, params))
        })
      } else if(type === '1'){
        this.$nextTick(() => {
          this.$refs.table1.query(Object.assign({type: type}, params))
        })
      }else if(type === '2'){
        this.$nextTick(() => {
          this.$refs.table2.query({})
        })
      }else if(type === '3'){
        this.$nextTick(() => {
          this.$refs.table3.query({})
        })
      }else if(type === '4'){
        this.$nextTick(() => {
          this.$refs.table4.query({})
        })
      }
    },
    changeMonth(data){
      this.getInfo(this.type,{h1406: data})
    },
    handleCancel() {
      if(this.type === '0' || this.type === '1'){
        this.visible = false
      }else if(this.type === '2'){
        this.visible2 = false
      }else if(this.type === '3'){
        this.visible3 = false
      }else if(this.type === '4'){
        this.visible4 = false
      }
      this.getInfo(this.type,{h1406: this.formInfo.h1406})
    },
    handleOK(){
      if(this.type === '0' || this.type === '1'){
        const data = this.$refs.benefitEvaluationForm.getHandleData()
        this.$loading.show('正在处理数据,请等待...')
        if(this.flag === 'save'){
          this.$http.post(benefitEvaluationForSave, data).then((res) => {
            this.$message.success("新增成功");
            this.getInfo(this.type,{h1406: this.formInfo.h1406})
            this.showOrHide()
          }).finally(()=>{
            this.$loading.hide()
          });
        }else {
          this.$http.post(benefitEvaluationForUpdate, data).then((res) => {
            this.$message.success("修改成功");
            this.getInfo(this.type,{h1406: this.formInfo.h1406})
            this.showOrHide()
          }).finally(()=>{
            this.$loading.hide()
          });
        }
      }else if(this.type === '2'){
        this.$loading.show('正在处理数据,请等待...')
        if(this.flag === 'save'){
          this.$http.post(saveForH141, this.formData2).then((res) => {
            this.$message.success("新增成功");
            this.getInfo(this.type)
            this.showOrHide()
          }).finally(()=>{
            this.$loading.hide()
          });
        }else {
          this.$http.post(updateForH141, this.formData2).then((res) => {
            this.$message.success("修改成功");
            this.getInfo(this.type)
            this.showOrHide()
          }).finally(()=>{
            this.$loading.hide()
          });
        }
      }else if(this.type === '3'){
        this.$loading.show('正在处理数据,请等待...')
        if(this.flag === 'save'){
          this.$http.post(saveForH142, this.formData3).then((res) => {
            this.$message.success("新增成功");
            this.getInfo(this.type)
            this.showOrHide()
          }).finally(()=>{
            this.$loading.hide()
          });
        }else {
          this.$http.post(updateForH142, this.formData3).then((res) => {
            this.$message.success("修改成功");
            this.getInfo(this.type)
            this.showOrHide()
          }).finally(()=>{
            this.$loading.hide()
          });
        }
      }else if(this.type === '4'){
        this.$loading.show('正在处理数据,请等待...')
        if(this.flag === 'save'){
          this.$http.post(saveForH143, this.formData4).then((res) => {
            this.$message.success("新增成功");
            this.getInfo(this.type)
            this.showOrHide()
          }).finally(()=>{
            this.$loading.hide()
          });
        }else {
          this.$http.post(updateForH143, this.formData4).then((res) => {
            this.$message.success("修改成功");
            this.getInfo(this.type)
            this.showOrHide()
          }).finally(()=>{
            this.$loading.hide()
          });
        }
      }
    },
    showOrHide() {
      if(this.type === '0' || this.type === '1'){
        this.visible = !this.visible
      }else if(this.type === '2'){
        this.formData2.h14102 = undefined
        this.formData2.h14103 = undefined
        this.formData2.h14104 = undefined
        this.visible2 = !this.visible2
      }else if(this.type === '3'){
        this.formData3.h14202 = undefined
        this.visible3 = !this.visible3
      }else if(this.type === '4'){
        this.formData4.h14302 = undefined
        this.formData4.h14303 = undefined
        this.formData4.h14304 = undefined
        this.formData4.h14305 = undefined
        this.formData4.h14306 = undefined
        this.formData4.h14307 = undefined
        this.formData4.h14308 = undefined
        this.formData4.h14309 = undefined
        this.visible4 = !this.visible4
      }
    },
    edit(row) {
      this.flag = 'edit'
      this.showOrHide()
      this.$nextTick(() => {
        if(this.type === '0' || this.type === '1'){
          this.$refs.benefitEvaluationForm.initData(row);
        }else if(this.type === '2'){
          this.formData2 = row
        }else if(this.type === '3'){
          this.formData3 = row
        }else if(this.type === '4'){
          this.formData4 = row
        }
      })
    },
    save(){
      this.flag = 'save'
      this.showOrHide()
    },
    del(row){
      this.$loading.show('正在处理数据,请等待...')
      let url = undefined
      if(this.type === '0' || this.type === '1'){
        url = benefitEvaluationForDel
      }else if(this.type === '2'){
        url = delForH141
      }else if(this.type === '3'){
        url = delForH142
      }else if(this.type === '4'){
        url = delForH143
      }
      this.$http.post(url, row).then((res) => {
        this.$message.success("删除成功");
        this.getInfo(this.type)
      }).finally(()=>{
        this.$loading.hide()
      });
    }
  },
  watch: {}
}
</script>
<style lang="less" scoped>
.ep-button-class {
  border: 1px solid #bfbfbf;
  background-color: #bfbfbf;
}
.permission {
  //padding: 15px 20px 0;
  height: 100%;

  .desc,
  .operate {
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: #fff;

    > div {
      flex: 0 0 auto;
      display: flex;
      align-items: center;
    }


  }

  .desc {
    margin-bottom: 20px;
  }

  .operate {
    margin-bottom: 15px;
    .field {
      flex: 0 0 auto;
      position: relative;
      margin-left: 15px;
      .field-box {
        position: absolute;
        top: 40px;
        left: 0;
        right: -40px;
        z-index: 99;
        border: 1px solid #2175a9;
        background: #002a44;
        border-radius: 5px;
        ul {
          padding: 10px;
          li {
            padding: 1px 0;
          }
        }
        .btn {
          display: flex;
          align-items: center;
          justify-content: space-between;
          padding: 5px;
          border-top: 1px solid #2175a9;
          color: #fff;
          p {
            flex: 1;
            text-align: center;
            cursor: pointer;
            &:hover {
              color: #49bbeb;
            }
          }
        }
      }
    }
  }
  //.ep-table {
  //  height: calc(100% - 130px);
  //}
}

@media screen and (max-width: 1500px) {
  .ep-table {
    height: calc(100% - 96px);
  }
}

@media screen and (min-width: 1500px) {
  .ep-table {
    height: calc(100% - 110px);
  }
}

/deep/.ant-form-item{
  margin-bottom: 0px;
}
</style>
